<template>
    <view class="bg-content">
        <u-sticky>
            <div style="height: 84px; border-bottom: 1rpx solid #eeeeee; background-color: #FFFFFF;">
                <u-search :placeholder="tabList[activeTabIndex].searchPlaceholder" v-model="searchKeyword" @search="onSearch" @custom="onSearch"></u-search>
                <u-tabs :list="tabList" name="title" active-color="red" :is-scroll="false" :current="activeTabIndex" @change="onTabChange"></u-tabs>
            </div>
        </u-sticky>

        <storePlatformCashDepositRechargeRecord ref="storePlatformCashDepositRechargeRecordRef"
                                                v-if="activeTabIndex === 0"></storePlatformCashDepositRechargeRecord>

        <storePlatformCashDepositDeductionRecord ref="storePlatformCashDepositDeductionRecordRef"
                                                 v-if="activeTabIndex === 1"></storePlatformCashDepositDeductionRecord>

        <storePlatformCashDepositWithdrawalRecord ref="storePlatformCashDepositWithdrawalRecordRef"
                                                  v-if="activeTabIndex === 2"></storePlatformCashDepositWithdrawalRecord>

        <div style="margin-bottom: 100px;"></div>

        <div class="custom-bottom-bar">
            <div>
                <div style="padding: 5px;font-size: 14px;text-align: center;">
                    如果店铺支持线上退款功能，保证金过低将可能导致退款失败，请预充值足够的保证金。
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <u-button type="default">
                            店铺保证金：<span style="color: red;">￥{{tbStore  ? tbStore.cashDeposit : 0 | toFixed2}}</span>
                        </u-button>
                    </div>
                    <div>
                        <u-button type="error"
                                  @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-cash-deposit/store-platform-cash-deposit-recharge/index')">
                            充值
                        </u-button>
                    </div>
                    <div>
                        <u-button type="primary" @click="withdrawal()">
                            提现
                        </u-button>
                    </div>
                </div>
            </div>
        </div>
    </view>
</template>

<script>

    import storePlatformCashDepositWithdrawalRecord from './store-platform-cash-deposit-withdrawal-record/index'
    import storePlatformCashDepositRechargeRecord from './store-platform-cash-deposit-recharge-record/index'
    import storePlatformCashDepositDeductionRecord from './store-platform-cash-deposit-deduction-record/index'
    import {TbStoreService} from "../../../../../dev/services/tb-store.service";
    import {TbCommunityService} from "../../../../../dev/services/tb-community.service";
    import {TbStoreCashDepositWithdrawalRecordService} from "../../../../../dev/services/tb-store-cash-deposit-withdrawal-record.service";
    import {CommonUtil} from "../../../../../dev/core/utils/common.util";

    export default {
        data() {
            return {
                searchKeyword: '',
                tabList: [
                    {searchPlaceholder: '支付流水号', title: '充值记录', ref: 'storePlatformCashDepositRechargeRecordRef'},
                    {searchPlaceholder: '商品名称/订单号', title: '扣费记录', ref: 'storePlatformCashDepositDeductionRecordRef'},
                    {searchPlaceholder: '提现批次号/提现流水号', title: '提现记录', ref: 'storePlatformCashDepositWithdrawalRecordRef'},
                ],
                activeTabIndex: -1,
                tbStore: null,
                cashDeposit: 0.0  // 店铺保证金
            }
        },
        components: {
            storePlatformCashDepositDeductionRecord,
            storePlatformCashDepositRechargeRecord,
            storePlatformCashDepositWithdrawalRecord,
        },
        onShow() {
            const _self = this;
            console.log('-------------------------------------', _self.urlParams);
            new TbStoreService().findTbStoreById(this.globalVariable.userInfo.tbStore.id).then(result => {
                _self.tbStore = result;
            });
            new TbCommunityService().findTbCommunityById(_self.globalVariable.userInfo.tbStore.communityId).then(result => {
                _self.cashDeposit = result.cashDeposit;
            });
            this.activeTabIndex = -1;
            this.activeTabIndex = parseInt(_self.urlParams.activeTabIndex);
            this.$forceUpdate();
        },
        watch: {
            activeTabIndex: {
                deep: true, // 深度监听
                handler(newVal, oldVal) {
                    const _self = this;
                    console.log("activeTabIndex参数改变，即将刷新...", `新值：${newVal}`, `旧值：${oldVal}`);
                    _self.$nextTick(() => {
                        _self.$refs[_self.tabList[_self.activeTabIndex].ref].doRefresh(_self.$refs[_self.tabList[_self.activeTabIndex].ref].dataList);
                    });
                }
            }
        },
        // 上拉加载
        onReachBottom: function () {
            const _self = this;
            if (_self.$refs[_self.tabList[_self.activeTabIndex].ref].pagination.hasNextPage) {
                _self.$refs[_self.tabList[_self.activeTabIndex].ref].doInfinite();
            }
        },
        methods: {
            onSearch() {
                const _self = this;
                _self.$refs[_self.tabList[_self.activeTabIndex].ref].searchKeyword = CommonUtil.trim(this.searchKeyword);
                _self.$refs[_self.tabList[_self.activeTabIndex].ref].doRefresh(_self.$refs[_self.tabList[_self.activeTabIndex].ref].dataList)
            },
            onTabChange(index) {
                const _self = this;
                _self.activeTabIndex = index;
                _self.urlParams.activeTabIndex = _self.activeTabIndex;
            },
            /**
             * 提现
             */
            withdrawal() {
                const _self = this;
                CommonUtil.alert({
                    title: '确定提店铺现保证金吗？',
                    content: '请先核实店铺设置的支付宝账号和支付宝真实名字准确无误后再提现',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbStoreCashDepositWithdrawalRecordService().withdrawalToAccount().then(result => {
                                CommonUtil.alert(result.message);
                                if (_self.activeTabIndex !== 2) {
                                    _self.activeTabIndex = 2;
                                } else {
                                    _self.$refs[_self.tabList[_self.activeTabIndex].ref].doRefresh(_self.$refs[_self.tabList[_self.activeTabIndex].ref].dataList)
                                }
                                new TbStoreService().findTbStoreById(_self.globalVariable.userInfo.tbStore.id).then(result => {
                                    _self.tbStore = result;
                                });
                            });
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
